<template>
  <div class="setting_title">课程介绍设置</div>
  <div class="course_intro">
    <div class="intro_content" v-html="courseBase.course_intro"/>
    <div>
      <wang-editor :courseIntro="intro" @update:intro="updateCourseIntrohtml" class="editor"></wang-editor>
      <el-button @click="handleSaveIntro">保存编辑</el-button>
    </div>
  </div>
  <div style="text-align: center"> 更新时间：{{ courseBase.update_time }}</div>
</template>

<script setup>
import WangEditor from "@/components/WangEditor.vue";
import {ref} from "vue";
import {getCourseIntro, updateCourseIntro} from '@/apis/apis.js'
import {onMounted} from "vue";
import {ElMessage} from "element-plus";

const courseId = 1;
const courseBase = ref({})
const intro = ref("")


// 定义一个方法来处理编辑器内容的更新
const updateCourseIntrohtml = (newIntro) => {
  courseBase.value.course_intro = newIntro;
};
const fetchCourseIntro = async (data) => {
  const rep = await getCourseIntro(data)
  // console.log("我这么大一个rep哪里去了！！"+JSON.stringify(rep.data))
  try {
    if (rep.data.status === 1) {
      courseBase.value = rep.data.data
      intro.value = courseBase.value.course_intro
    } else {
      ElMessage({
        showClose: true,
        message: 'rep.data.msg',
        type: 'error',
      })
    }
  } catch (err) {
    console.log(err)
    ElMessage({
      showClose: true,
      message: '连接失败！',
      type: 'error',
    })
  }
}

onMounted(() => {
  fetchCourseIntro(courseId);
  // 获取具有w-e-text-container类的元素
  const textContainer = document.querySelector('.w-e-text-container');
  // 更改元素的行内样式高度
  textContainer.style.height = '100%'; // 设置为您需要的高度
});
//更新课程简介
const handleSaveIntro = async () => {
  const rep = await updateCourseIntro(courseBase.value);
  try {
    if (rep.data.status === 1) {
      ElMessage({
        showClose: true,
        message: '更新成功！',
        type: 'success'
      })
    } else {
      ElMessage({
        showClose: true,
        message: "更新失败！",
        type: 'error'
      })
    }
  } catch (err) {
    console.log(err)
    ElMessage({
      showClose: true,
      message: '连接失败!',
      type: 'error'
    })
  }
}
</script>

<style scoped>
.setting_title {
  margin: 10px 0;
  font-family: 华文行楷, sans-serif;
  font-size: 40px;
  text-align: center;
}

.intro_content {
  max-width: 100%;
  margin: 10px;
  background: rgba(167, 223, 255, 0.25);
  border-radius: 15px;
  border: #a9d6ff 5px solid;
  text-align: center;
}

.course_intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 0;
}

.editor {
  margin: 10px 0;
}

</style>